<template>
  <div class="fwwsbcwh">
    <searchbtn :componentDetail="componentDetail"/>
    <div v-for="(each_bt, index) in btlist" :key="index">
      <div
        :class="{
          each_bt_div: true,
          each_bt_div_act: each_bt_div_act == each_bt,
        }"
        :style="geteach_bt_divstyle(each_bt.name)"
        @click="btnclick(each_bt)"
      ></div>
    </div>
    <settingbtn
    :componentDetail="componentDetail"
    :style="{
      width: this.getscalepxc(50),
        height: this.getscalepxc(50),
    }"
    ></settingbtn>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "rightbuttontaian",
  components: {},

  mixins: [commonmixins],

  data() {
    return {
      inputval: "",
      btlist: [
        { name: "nengxiao" },
        // { name: "shezhi" },
        { name: "guanbi" },
        { name: "liuyan" },
      ],
      each_bt_div_act: "sousuo",
      each_bt_divstyle: {},
      inputdiv: {
        width: "100px",
      },
    };
  },
  computed: {},
  watch: {
    scale: {
      handler: function (n, o) {
        this.loadData();
      },
    },
  },
  mounted() {
    console.log(this.scale);
  },
  methods: {
    // getimgpath(path){
    //   return
    // },
    geteach_bt_divstyle(path) {
      return {
        width: this.getscalepxc(50),
        height: this.getscalepxc(50),
        backgroundImage: `url(/configuration/2d/${path}.png)`,
      };
    },
    loadData() {
      console.log(this.scale);
    },
    getimgpath(path) {
      return `/configuration/2d/${path}.png`;
    },
    btnclick(key) {
      console.log(key)
      this.each_bt_div_act = key;
      this.$message.success(key);
    },
  },
};
</script>
<style lang='scss' scoped>
.each_bt_div {
  // background-image: url("/configuration/2d/lbtnn.png");
  // width: 30px;
  // height: 30px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #ffffff;
  &:hover {
    color: red;
  }
}
.each_bt_div_act {
  padding: 5px;
  // background-image: url("/configuration/2d/lbtna.png");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #ffffff;
  &:hover {
    color: red;
  }
}
</style>